<!DOCTYPE html>
<html>

<head>
    <title>Vue , Hello World.</title>
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <!-- Latest compiled and minified CSS -->
    <!-- 1.7.1/1.11.1/2.1.1 -->
    <script type="text/javascript" src="Lib/jquery-1.7.1.min.js"></script>
    <script src="Lib/vue.js"></script>
    <script src="Lib/vue-scroller.min.js"></script>
    <style type="text/css">
    html,
    body {
        margin: 0;
    }
    
    * {
        box-sizing: border-box;
    }
    
    .row {
        width: 100%;
        height: 50px;
        padding: 10px 0;
        font-size: 16px;
        line-height: 30px;
        text-align: center;
        color: #444;
        background-color: #fff;
    }
    
    .grey-bg {
        background-color: #eee;
    }
    
    .header {
        position: fixed;
        top: 0;
        left: 0;
        height: 44px;
        width: 100%;
        box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
        background-color: #fff;
        z-index: 1000;
        color: #666;
    }
    
    .header > .title {
        font-size: 16px;
        line-height: 44px;
        text-align: center;
        margin: 0 auto;
    }
    </style>
</head>

<body>
    <div id="app">
        <div class="header">
            <h1 class="title">Refresh & Infinite</h1>
        </div>
        <scroller delegate-id="myScroller" style="top: 44px" :on-refresh="refresh" :on-infinite="infinite" ref="my_scroller">
            <div v-for="(item, index) in items" class="row" :class="{'grey-bg': index % 2 == 0}">
                {{ item }}
            </div>
        </scroller>
    </div>
</body>
<script type="text/javascript">
var vm = new Vue({
    el: '#app',
    components: {
        'Scroller': Scroller
    },
    data: {
        items: []
    },
    // mounted() {
    //     for (var i = 1; i <= 20; i++) {
    //         this.items.push(i + ' - keep walking, be 2 with you.');
    //     }
    //     this.top = 1;
    //     this.bottom = 20;
    //     setTimeout(() => {
    //         this.$refs.my_scroller.resize();
    //     })
    // },
    methods: {
    	loadData(){
    		for (var i = 1; i <= 20; i++) {
	            this.items.push(i + ' - keep walking, be 2 with you.');
	        }
	        this.top = 1;
	        this.bottom = 20;
	        alert(1);
	        setTimeout(() => {
	            this.$refs.my_scroller.resize();
	        });
	        alert(1);
    	},
        refresh() {
            setTimeout(() => {
                var start = this.top - 1
                for (var i = start; i > start - 10; i--) {
                    this.items.splice(0, 0, i + ' - keep walking, be 2 with you.');
                }
                this.top = this.top - 10;
                if (this.$refs.my_scroller)
                    this.$refs.my_scroller.finishPullToRefresh();
            }, 1500)
        },
        infinite() {
            setTimeout(() => {
                var start = this.bottom + 1;
                for (var i = start; i < start + 10; i++) {
                    this.items.push(i + ' - keep walking, be 2 with you.');
                }
                this.bottom = this.bottom + 10;
                setTimeout(() => {
                    if (this.$refs.my_scroller)
                        this.$refs.my_scroller.resize();
                })
            }, 1500)
        }
    }
});

vm.loadData();
</script>

</html>
